/* Copyright (c) 2025-2030 ShawnLi*/

import styled, { css } from 'styled-components';

import { centerIcon, customImage } from '~/renderer/mixins';
import { ITheme } from '~/interfaces';
import { ICON_CLOSE } from '~/renderer/constants/icons';

export const Remove = styled.div<{ theme?: ITheme }>`
  height: 16px;
  width: 16px;
  cursor: pointer;
  opacity: 0.54;
  background-image: url(${ICON_CLOSE});
  ${centerIcon()};
  ${({ theme }) => css`
    filter: ${theme['pages.lightForeground'] ? 'invert(100%)' : 'none'};
  `};
  &:hover {
    opacity: 1;
  }
`;

export const Thumbnail = styled.img`
  max-width: 100%;
  height: auto;
`;
// // flex-direction: column;
// // height: 100%;
// export const ContentContainer = styled.div`
//   flex: 1;
//   flex-direction: column;
//   gap: 20px;
// `;
// export const TitleContainer = styled.div`
//   display: flex;
//   margin-right: 16px;
//   overflow: hidden;
//   text-overflow: ellipsis;
// `;

// export const OperationContainer = styled.div`
// `;

// export const StateContainer = styled.div`
// `;

// export const Title = styled.a`
//   display: -webkit-box;
//   -webkit-box-orient: vertical;
//   -webkit-line-clamp: 2;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   word-break: break-word;

//   &:hover {
//     cursor: pointer;
//   }
// `;


export const Title = styled.a`
  white-space: nowrap;
  width: fit-content;
  text-decoration: none;
  color: inherit;

  &:hover {
    cursor: pointer;
    text-decoration: underline;
  }
`;

export const TitleContainer = styled.div`
  flex: 2;
  margin-right: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
`;

export const Site = styled.div`
  flex: 1;
  opacity: 0.54;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

export const Time = styled.div`
  opacity: 0.54;
  margin-left: 16px;
  margin-right: 32px;
`;

export const OperationContainer = styled.div`
  flex: 2;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
`;
export const State = styled.div<{ color?: string }>`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  ${({ color }) => css`
    color: ${color};
  `};
`;